<div class="content-wrap-full-height">
  <nz-card [nzBordered]="false" [nzBodyStyle]="{padding:'10px'}">
    <div class="left-start-center">
      <nz-breadcrumb>
        <nz-breadcrumb-item>
          首页
        </nz-breadcrumb-item>
        <nz-breadcrumb-item>
          标签管理
        </nz-breadcrumb-item>
      </nz-breadcrumb>
    </div>
  </nz-card>
</div>


<div class="normal-table-wrap">
  <nz-card [nzBodyStyle]="{'padding-bottom':0}" class="m-b-10">
    <form nz-form>
      <div nz-row [nzGutter]="{ xs: 8, sm: 16, md: 24}">
        <div nz-col [nzXXl]="6" [nzXl]="6" [nzLg]="6" [nzMd]="12" nzSm="24" nzXs="24">
          <nz-form-item>
            <nz-form-label [nzFor]="" nzRequired>条形码</nz-form-label>
            <nz-form-control>
              <input nz-input name="id" #myInput autofocus [(ngModel)]="id"
                     (keyup)="($event.which === 13) ? getPrint(id) : 0"/>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzXXl]="6" [nzXl]="6" [nzLg]="6" [nzMd]="12" nzSm="24" nzXs="24">
          <nz-form-item>
            <nz-form-label [nzFor]="" nzRequired>扫码查看详情</nz-form-label>
            <nz-form-control>
              <input nz-input name="uid" [(ngModel)]="uid" (keyup)="($event.which === 13) ? getScanDetail(uid) : 1"/>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzXXl]="6" [nzXl]="6" [nzLg]="6" [nzMd]="12" nzSm="24" nzXs="24">
          <nz-form-item>
            <nz-form-label [nzFor]="">评价师</nz-form-label>
            <nz-form-control>
              <input nz-input name="evaluatePerson" placeholder="请输入评价师" [(ngModel)]="searchParam.evaluatePerson"/>
            </nz-form-control>
          </nz-form-item>
        </div>
        <ng-container *ngIf="!isCollapse">
          <div nz-col [nzXXl]="6" [nzXl]="6" [nzLg]="6" [nzMd]="12" nzSm="24" nzXs="24">
            <nz-form-item>
              <nz-form-label [nzFor]="">项目号+档案号</nz-form-label>
              <nz-form-control>
                <input nz-input name="projectNum" placeholder="请输入项目号+档案号" [(ngModel)]="searchParam.projectNum"/>
              </nz-form-control>
            </nz-form-item>
          </div>
          <div nz-col [nzXXl]="6" [nzXl]="6" [nzLg]="6" [nzMd]="12" nzSm="24" nzXs="24">
            <nz-form-item>
              <nz-form-label [nzFor]="">委托方</nz-form-label>
              <nz-form-control>
                <input nz-input name="client" placeholder="请输入委托方" [(ngModel)]="searchParam.client"/>
              </nz-form-control>
            </nz-form-item>
          </div>
          <div nz-col [nzXXl]="6" [nzXl]="6" [nzLg]="6" [nzMd]="12" nzSm="24" nzXs="24">
            <nz-form-item>
              <nz-form-label [nzFor]="">项目内容</nz-form-label>
              <nz-form-control>
                <input nz-input name="projectContent" placeholder="请输入项目内容" [(ngModel)]="searchParam.projectContent"/>
              </nz-form-control>
            </nz-form-item>
          </div>
          <div nz-col [nzXXl]="6" [nzXl]="6" [nzLg]="6" [nzMd]="12" nzSm="24" nzXs="24">
            <nz-form-item>
              <nz-form-label [nzFor]="">标签类型</nz-form-label>
              <nz-form-control>
                <nz-select nzShowSearch [(ngModel)]="searchParam.typeId" nzPlaceHolder="选择类型" name="typeName">
                  <nz-option *ngFor="let item of Options" [nzLabel]="item.label"
                             [nzValue]="item.value"></nz-option>
                </nz-select>
              </nz-form-control>
            </nz-form-item>
          </div>
          <!-- <div nz-col [nzXXl]="6" [nzXl]="6" [nzLg]="6" [nzMd]="12" nzSm="24" nzXs="24">
           </div>-->
        </ng-container>

        <div nz-col [nzXXl]="6" [nzXl]="6" [nzLg]="6" [nzMd]="12" nzSm="24" nzXs="24" class="text-right p-0">
          <button nz-button [nzType]="'primary'" (click)="getDataList()"><i nz-icon nzType="search"></i>搜索</button>
          <button nz-button class="m-l-15" (click)="resetForm()"><i nz-icon nzType="close-circle" nzTheme="outline"></i>重置
          </button>
          <a class="collapse operate-text" (click)="isCollapse=!isCollapse">
            <span *ngIf="isCollapse">展开</span>
            <span *ngIf="!isCollapse">收起</span>
            <i nz-icon [nzType]="isCollapse ? 'down' : 'up'"></i>
          </a>
        </div>
      </div>
    </form>
  </nz-card>
  <app-card-table-wrap [needAddBtn]="true" (add)="add()" [needImportBtn]="true" (import)="importResult()"
                       [needDownBtn]="true" (down)="templateDown()" [needExportBtn]="true" (export)="exportResult()">
    <app-ant-table (selectedChange)="selectedChecked($event)" (changePageSize)="changePageSize($event)"
                   (changePageNum)="getDataList($event)"
                   [tableConfig]="tableConfig" [tableData]="dataList"></app-ant-table>
    <ng-template #operationTpl let-name="name" let-id="id">
      <span class="operate-text" (click)="del(id)"><i nz-icon nzType="delete" nzTheme="outline"></i>删除</span>
      <span class="operate-text" (click)="edit(id)"><i nz-icon nzType="edit" nzTheme="outline"></i>编辑</span>
      <span class="operate-text" (click)="browserPrint(id)"><i nz-icon nzType="scan" nzTheme="outline"></i>生成条码</span>
    </ng-template>
  </app-card-table-wrap>
  <ng-template #repertoryFlagTpl let-repertoryFlag="repertoryFlag">
    <ng-container [ngSwitch]="repertoryFlag">
      <nz-tag *ngSwitchCase="false" [nzColor]="'red'">{{repertoryFlag|map:'repertoryFlag'}}</nz-tag>
      <nz-tag *ngSwitchCase="true" [nzColor]="'green'">{{repertoryFlag|map:'repertoryFlag'}}</nz-tag>
    </ng-container>
  </ng-template>
  <ng-template #lendFlagTpl let-lendFlag="lendFlag">
    <ng-container [ngSwitch]="lendFlag">
      <nz-tag *ngSwitchCase="true" [nzColor]="'magenta'">{{lendFlag|map:'lendFlag'}}</nz-tag>
      <nz-tag *ngSwitchCase="false" [nzColor]="'cyan'">{{lendFlag|map:'lendFlag'}}</nz-tag>
    </ng-container>
  </ng-template>
  <div [hidden]="true" id="jsbarcode">
    <svg id="svgcode"></svg>
  </div>

  <div [hidden]="true" id="scancode">
    <ul
      style="list-style: none;text-align: center;;padding:8px 5px 0;line-height: 1.6;font-weight: normal;">
      <li style="font-size:25px;margin-bottom: 10px;">{{detailData.projectNum}}</li>
      <li style="font-size: 24px;margin-bottom: 10px;">{{detailData.client}}</li>
      <li style="font-size: 23px;text-align: left; display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;
    overflow: hidden;">{{detailData.projectContent}}
      </li>
    </ul>
  </div>
</div>
<ng-template #dataDetail let-data="data">
  <form nz-form>
    <nz-form-item style="margin-bottom: 0">
      <nz-form-label [nzSm]="4" [nzXs]="24">项目档案号</nz-form-label>
      <nz-form-control [nzSm]="18" [nzXs]="24">
        <nz-form-text> {{data.projectNum}}</nz-form-text>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item style="margin-bottom: 0">
      <nz-form-label [nzSm]="4" [nzXs]="24">委托方</nz-form-label>
      <nz-form-control [nzSm]="18" [nzXs]="24">
        <nz-form-text> {{data.client}}</nz-form-text>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item style="margin-bottom: 0">
      <nz-form-label [nzSm]="4" [nzXs]="24">项目内容</nz-form-label>
      <nz-form-control [nzSm]="18" [nzXs]="24">
        <nz-form-text> {{data.projectContent}}</nz-form-text>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item style="margin-bottom: 0">
      <nz-form-label [nzSm]="4" [nzXs]="24">评价师</nz-form-label>
      <nz-form-control [nzSm]="18" [nzXs]="24">
        <nz-form-text> {{data.evaluatePerson}}</nz-form-text>
      </nz-form-control>
    </nz-form-item>
  </form>
</ng-template>
<ng-template #dragTpl>
  <div class="hand-model-move" cdkDragHandle cdkDrag cdkDragBoundary="nz-modal-container"
       cdkDragRootElement=".ant-modal-content">新增
  </div>
</ng-template>
